<template>
  <div class="account">
    <avue-crud
      :data="data"
      :option="option"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @row-del="rowDel"
      :page.sync="page"
      @on-load="onLoad"
      :before-open="beforeOpen"
      v-model="user"
    >
<!--      <template slot-scope="{ type, disabled }" slot="picForm">-->
<!--        <el-upload-->
<!--          class="avatar-uploader"-->
<!--          action="#"-->
<!--          :http-request="picUpload"-->
<!--          :show-file-list="false"-->
<!--          :auto-upload="true"-->
<!--        >-->
<!--          <img v-if="user.pic" :src="user.pic" class="avatar" />-->
<!--          <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--        </el-upload>-->
<!--      </template>-->
    </avue-crud>
  </div>
</template>

<script>
import {
  getChild,
  addChild,
  updateMembeChild,
  delChild,
  uploadImage,
} from "@/api/user";

let account = "";
export default {
  data() {
    return {
      user: {},
      data: [],
      page: {
        pageSize: 20,
        currentPage: 1,
        layout: "total, sizes, prev, pager, next, jumper",
        pageSizes: [10, 20, 50, 100],
      },
      option: {
        align: "center",
        menuAlign: "center",
        addBtnText: "新增账号",
        addBtnIcon: "el-icon-user",
        height: "3rem",
        editBtn: true,
        menuBtn: true,
        dialogWidth: "30%",
        editTitle: account,
        column: [
          {
            label: "用户名",
            prop: "username",
            span: 12,
          },
          {
            label: "手机号",
            prop: "mobile",
            span: 12,
          },
          // {
          //   label: "头像",
          //   prop: "pic",
          //   type: "img",
          //   span: 24,
          // },

          {
            label: "邮箱",
            prop: "email",
            span: 24,
          },
          {
            label: "账号",
            prop: "account",
            span: 8,
            display: false,
          },
        ],
      },
    };
  },
  created() {
    this.getChild();
  },
  methods: {
    async getChild(obj) {
      const res = await getChild(obj);
      this.data = res.data.data.data;
      this.page.total = res.data.data.total;
    },
    //新增子账号
    async addChild(data, done, loading) {
      const res = await addChild(data);
      if (res.data.status === 200) {
        loading();
        done();
        this.getChild();
        this.$message({
          type: "success",
          message: res.data.msg,
        });
      } else {
        this.$message({
          type: "error",
          message: res.data.msg,
        });
      }
    },
    //修改子账号
    async updateMembeChild(data, index, done, loading) {
      const res = await updateMembeChild(data);
      if (res.data.status === 200) {
        loading();
        done();
        this.getChild();
        this.$message({
          type: "success",
          message: res.data.msg,
        });
      } else {
        this.$message({
          type: "error",
          message: res.data.msg,
        });
      }
    },
    //删除子账号
    delChild(row) {
      this.$confirm("是否执行此操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await delChild({ membe_id: row.membe_id });
          if (res.data.status === 200) {
            this.getChild();
            this.$message({
              type: "success",
              message: res.data.msg,
            });
          } else {
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          }
        })
        .catch(() => {});
    },
    async picUpload(f) {
      let params = new FormData();
      // //注意在这里一个坑f.file
      params.append("file", f.file);
      const resp = await uploadImage(params);
      console.log(resp);
      //这里返回的是头像的url
      if (resp.data.status === 200) {
        this.user.pic = "http://membe.e-kc.com/" + resp.data.data;
      }
    },
    rowSave(form, done, loading) {
      console.log(this.user);
      this.addChild(form, done, loading);
    },
    rowUpdate(form, index, done, loading) {
      console.log(form, index, done, loading);
      this.updateMembeChild(form, index, done, loading);
    },
    rowDel(row) {
      this.delChild(row);
    },
    onLoad(page) {
      //模拟分页
      this.getChild({ limit: page.pageSize, page: page.currentPage });
    },
    beforeOpen(done, type, row) {
      if (type === "add") {
        this.user.pic = "";
        done();
      } else {
        done();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.account {
  padding: 20px 10px;

  .avue-crud__pagination {
    position: fixed;
    bottom: 0;
    height: 40px;
    width: 100%;
    text-align: center;
  }

  .avue-dialog {
    .el-dialog__header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .avue-crud__dialog__header {
        flex: 1;
      }
    }
  }
}

::v-deep .el-upload--picture-card {
  width: 120px;
  height: 120px;
  line-height: 120px;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 120px;
  height: 120px;
  line-height: 120px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  border: 1px dashed #eee;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
  margin-bottom: 20px;
}
</style>
